<template>

    <div class="main_div">
        <div class="main_left_left">
            <div class="box">
                <img :src="myAvatar" class="img2"/>
            </div>
            
            <el-icon class="icon_margin" :size="30" :color="elIconCharColor" @click="iconCheckBtn"><ChatRound/></el-icon>
            <el-icon class="icon_margin" :size="30" :color="elIconPeopleColor" @click="iconCheckPeopleBtn"><UserFilled/></el-icon>
            <el-icon class="icon_margin" :size="30" :color="elIconFileColor" @click="iconCheckFileBtn"><FolderOpened/></el-icon>
            <el-icon class="icon_margin" :size="30" :color="elIconFileColor" @click="backBtn"><Back/></el-icon>
        </div>
        <div class="main_left">
            <br>
                <div class="search_div">
                    <el-input
                        v-model="search"
                        class="input_top"
                        placeholder="请输入内容"
                        :prefix-icon="Search"
                    />
                    <el-button>+</el-button>
                </div>
            <br>

            <div v-for="(item, index) in userInfoList" :key="index" class="text_item" @click="itemChatBtn(item, index)">
                <div class="box_column">
                    <img :src="item.avatar" class="img2"/>
                </div>
                <div class="txt_user">
                    <div class="txt_user_name">
                        {{item.name }}
                    </div>
                    <div class="txt_user_content">
                        {{item.phone }}
                    </div>
                </div>
                
            </div>
        </div>
        <div class="main_right">
            <ConversationView/>
        </div>
    </div>

</template>

<script setup>
import { onMounted,computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Calendar, Search } from '@element-plus/icons-vue'
import {  pageUserInfo,getUserInfoUrl } from '@/api/user';
import ConversationView from './ConversationView.vue';
import Bus from '../bus/bus.js';

const elIconCharColor = ref("#C9C9C9")
const elIconPeopleColor = ref("#C9C9C9")
const elIconFileColor = ref("#C9C9C9")
const count = ref(10)
const myAvatar = ref("");
const loading = ref(false)
const search = ref("")
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  loading.value = true
}
const userInfoList = ref([])
const tableData = [
    {date: '2016-05-02'},{date: '2016-05-03'},{date: '2016-05-04'}
]

//首先在setup中定义
const router = useRouter();
var local_token = null;
var user_info = {
    id: 1,
    avatar: "",
    userId: 1,
    name: "1",
    phone: "1",
    password: "1",
    token: '',
};
onMounted(() => {
    const userInfo = JSON.parse(getUserInfo());
    local_token = getToken();
    console.log('userInfo:', userInfo);
    if (null != userInfo) {
        myAvatar.value = userInfo.avatar;
    }

    if (undefined === local_token || null === local_token) {
        this.$router.push('/login');
    }

    const userInfoHtp = getUserInfoUrl();
    userInfoHtp.then((result) => {
        user_info = JSON.stringify(result.data);
        storeUserInfo(user_info);
    });

    if (null != userInfo) {
        myAvatar.value = userInfo.avatar;
    }
});

const handleItemClick = (item) => {
    console.log('Item clicked:', item);
      // 在这里处理点击事件
}

// 获取token
const getToken = () => {
    return localStorage.getItem('token');
};

const iconCheckBtn = () => {
    if("#01C60E" === elIconCharColor.value) {
        elIconCharColor.value="#C9C9C9";
    } else {
        chatPeopleBtn(1);
        elIconCharColor.value="#01C60E";
        elIconPeopleColor.value="#C9C9C9";
        elIconFileColor.value="#C9C9C9";
    }
    
};
const iconCheckPeopleBtn = () => {
    if("#01C60E" === elIconPeopleColor.value) {
        elIconPeopleColor.value="#C9C9C9";
    } else {
        elIconCharColor.value="#C9C9C9";
        elIconPeopleColor.value="#01C60E";
        elIconFileColor.value="#C9C9C9";
    }
};
const backBtn = () => {
    router.push('/login');
};
const iconCheckFileBtn = () => {
    if("#01C60E" === elIconFileColor.value) {
        elIconFileColor.value="#C9C9C9";
    } else {
        elIconCharColor.value="#C9C9C9";
        elIconPeopleColor.value="#C9C9C9";
        elIconFileColor.value="#01C60E";
    }
};
const itemChatBtn = (item, index) => {
    console.info(item,"item");
    console.info(index,"index");

    Bus.$emit('chat_peo',{id:item.id,name:item.name,avatar:item.avatar,myAvatar:myAvatar.value});

};
const chatPeopleBtn = () => {
    try {

        // 使用JSON.parse()将JSON字符串转换为对象
        let userInfo  = JSON.parse(getUserInfo());
        console.info(userInfo.userId,"userInfo");
        const data = pageUserInfo({ pageNumber: 1, pageSize: 10,registerUserId: userInfo.userId})
        data.then((result) => {
            // userInfoList.value = result.data.list 
            userInfoList.value = result.data.list;
        })

    } catch (error) {
        // 这里的错误已经被 Axios 拦截器处理并弹出通知框
        console.error('请求失败', error);
    }
}
// 存储token
const storeUserInfo = (userInfo) => {
    localStorage.setItem('userInfo', userInfo);
};
const getUserInfo = () => {
    return localStorage.getItem('userInfo');
};
const handleRowClick = (row, column, event) =>{
      // 这里可以处理选中行的逻辑
      console.log('选中的行数据:', row);
};
</script>



<style>

.main_left_left {
    width: 80px;
    display: flex;
    align-items: center; 
    flex-direction: column;
    background-color: #2E2E2E;
}
.el-table__row>td{ border: none; }
::v-deep .el-table::before { height: 0px; }
.icon_margin {
    margin-top: 10px; 
    color: red;
}
.box{
    margin-top: 30px;
    width: 50px;
    height: 50px;
    background-color: cadetblue;
}
.box_column{
    width: 60px;
    height: 60px;
    margin: 5px;
    background-color: cadetblue;
}
.img2 {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.main_left {
    width: 249px;
    background-color: #EBEBEB;
}

.main_right {
    border-left: 1px solid Gainsboro;
    align-self: stretch;
    flex: 1;
}
.infinite-list-wrapper {
  height: 80vh;
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.text_item {
    display: flex;
    margin: 10px;
}
.txt_user {
    justify-content: center;
    margin-top: 5px;
}
.txt_user_name {
    font-size: larger;
    font-weight: bold;
}
.txt_user_content {
    margin-top: 12px;
}
.input_top{
    margin-right: 5px;
}
.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 2px;
}
.main_div {
    display: flex;
    background-color: #F5F5F5;
}
.search_div {
    display: flex;
    margin-left: 5px;
    margin-right: 3px;
}
</style>
